<template>
    <div v-if="props.queryConfig.queryPanel" :class="props.queryConfig.simple ? 'w-full' : 'pl-2 pr-2 pt-2 w-full'">
        <div :class="['w-full card flex justify-between', props.queryConfig.simple ? '' : 'p-2 pt-3 pb-3']">
            <div class="w-full">
                <div :class="['w-full', 'flutterPage', 'flutter', 'grid', gridColsNum ? gridColsNum : 'grid-cols-4', 'gap-3', 'readonly']">
                    <template v-for="(element, index) in flutter" :key="index">
                        <div v-if="element.show" class="flex items-center">
                            <a-form-item-rest>
                                <div class="space-nowrap text-right pr-2 break-keep text-zinc-700 dark:text-zinc-400">{{ element.title }}</div>
                                <d-search v-if="element.type === 'SEARCH'" v-model:value="element.value" :placeholder="element.placeholder" />
                                <d-input v-if="element.type === 'INPUT'" v-model:value="element.value" :placeholder="element.placeholder" />
                                <d-number v-if="element.type === 'NUMBER'" v-model:value="element.value" :placeholder="element.placeholder" />
                                <d-numberRange v-if="element.type === 'NUMBER-NUMBER'" v-model:value="element.value" :placeholder="element.placeholder" />
                                <d-select v-if="element.type === 'SELECT'" v-model:value="element.value" :allowClear="element.allowClear" :options="element.options" :placeholder="element.placeholder" :filterOption="filterOption" />
                                <d-selects v-if="element.type === 'SELECTS'" v-model:value="element.value" :allowClear="element.allowClear" :options="element.options" :placeholder="element.placeholder" :filterOption="filterOption" />
                                <d-time v-if="element.type === 'YYYY' || element.type === 'MM' || element.type === 'DD'" :type="element.type" v-model:value="element.value" />
                                <d-timeRange v-if="element.type === 'YYYY-YYYY' || element.type === 'MM-MM' || element.type === 'DD-DD'" :type="element.type" v-model:value="element.value" />
                                <d-org v-if="element.type === 'USER' || element.type === 'DEPT'" :allowClear="element.allowClear" :type="element.type" v-model:value="element.value" v-model:name="element.name" />
                                <d-orgs v-if="element.type === 'USERS' || element.type === 'DEPTS'" :allowClear="element.allowClear" :type="element.type" v-model:value="element.value" v-model:name="element.name" />
                            </a-form-item-rest>
                        </div>
                    </template>
                    <div class="queryBut" v-if="props.queryConfig.flutterAll" :style="{ 'padding-left': props.queryConfig.flutterTitWidth == '0px' ? '8px' : props.queryConfig.flutterTitWidth }">
                        <a-space :size="5">
                            <a-button type="primary" @click="search">
                                <template #icon>
                                    <sysIcon type="system-changyong_sousuo" />
                                </template>
                                查询
                            </a-button>
                            <a-button @click="resetFlutter"> 重置 </a-button>
                            <!-- <d-link type="link" class="ml-1">更多查询</d-link> -->
                        </a-space>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const emits = defineEmits(['flutterSend'])
const props = defineProps({
    queryConfig: null,
})
//设置初始网格参数，不然会有页面闪烁
//获取flutterPage宽度，因为是在dom加载之前，所以这里根据body宽度减去导航宽度
let flutterPageWindth = 0
let state = reactive({
    flutterDrawerRef: null,
    flutter: [],
    showPaenl: false,
    gridColsNum: flutterPageWindth,
    store: useStore(),
})

if (state.store.menu.collapsed) {
    flutterPageWindth = document.body.clientWidth - 98
} else {
    flutterPageWindth = document.body.clientWidth - 248
}
if (flutterPageWindth > 1399) {
    flutterPageWindth = 'grid-cols-5'
} else if (flutterPageWindth > 1099) {
    flutterPageWindth = 'grid-cols-4'
} else if (flutterPageWindth > 699) {
    flutterPageWindth = 'grid-cols-3'
} else if (flutterPageWindth > 399) {
    flutterPageWindth = 'grid-cols-2'
} else {
    flutterPageWindth = 'grid-cols-1'
}

// const getOptionsData = (options, index) => {
//   axios.get(options.url, options.params).then((res) => {
//     res.data.forEach((element) => {
//       element.label = element.name
//       element.value = element.id
//     })
//     state.flutter[index].options = res.data
//   })
// }

if (props.queryConfig.flutter && props.queryConfig.flutter.length) {
    state.flutter = XEUtils.clone(props.queryConfig.flutter, true)
}

// watch(
//     () => state.flutter,
//     newArr => {
//         setTimeout(() => {
//             search(state.flutter)
//         }, 100)
//     },
//     { deep: true, immediate: false }
// )

const search = () => {
    const newArr = state.flutter.map(element => {
        return Object.assign({}, { key: element.key, value: element.value })
    })
    const result = newArr.reduce((obj, item) => {
        obj[item.key] = item.value
        return obj
    }, {})
    emits('flutterSend', result, state.flutter)
}

//接收筛选model数据
// const getFlutterSend = (val) => {
//   state.flutter = val
//   emits('flutterSend', state.flutter)
// }

const filterOption = (input, option, options) => {
    let key = null
    options.forEach(element => {
        if (element.label.indexOf(input) > -1) {
            if (option.value.indexOf(element.value) > -1) {
                key = option.value
            }
        }
    })
    return key
}

const resetFlutter = () => {
    state.flutter.forEach(element => {
        element.value = undefined
        element.name = undefined
    })
    search()
}
onMounted(() => {
    elementResizeDetectorMaker().listenTo(document.getElementsByClassName('flutterPage'), element => {
        if (element.offsetWidth > 1399) {
            state.gridColsNum = 'grid-cols-5'
        } else if (element.offsetWidth > 1099) {
            state.gridColsNum = 'grid-cols-4'
        } else if (element.offsetWidth > 699) {
            state.gridColsNum = 'grid-cols-3'
        } else if (element.offsetWidth > 399) {
            state.gridColsNum = 'grid-cols-2'
        } else {
            state.gridColsNum = 'grid-cols-1'
        }
    })

    // setTimeout(() => {
    //     const queryBut = document.querySelector(".queryBut");
    //     const parent = queryBut.offsetParent;
    //     const distance = queryBut.offsetLeft - parent.offsetLeft;
    //     if (distance < 100) {
    //     }
    // }, 100);
})

const { flutterDrawerRef, flutter, gridColsNum } = toRefs(state)
</script>
